<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true">
              <el-form-item label="单据编号" label-width="80px" prop="oddNumber">
                <el-input v-model="list_params.oddNumber" placeholder="单据编号/合同号/货柜号" ></el-input>
              </el-form-item>
              <el-form-item label="付款对象" prop="paymentRole">
                <el-select filterable  v-model="list_params.paymentRole" placeholder="付款对象" clearable :style="{width: '100%'}" @change="onSearchPaymentRoleChange">
                  <el-option label="货主" value="2"></el-option>
                  <el-option value="3" label="档口"></el-option>
                  <el-option value="4" label="客户"></el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="付款单位" prop="paymentCompanyId">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="list_params.paymentCompanyId">
                    <el-option v-if="list_params.paymentRole == 2" v-for="item in search_payment_roles" :label="item.name" :value="item.id"></el-option>
                    <el-option v-if="list_params.paymentRole == 3" v-for="item in search_payment_roles" :label="item.marketName+'-'+item.name" :value="item.id"></el-option>
                    <el-option v-if="list_params.paymentRole == 4" v-for="item in search_payment_roles" :label="item.customerName	" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              <el-form-item label="归属单位" prop="ownershipCompanyId">
                <el-select v-model="list_params.ownershipCompanyId">
                  <el-option v-for="item in ownership_company_list" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
            <!--                      <el-button>删除</el-button>-->
            <!--                      <el-button @click="handleEnable(0)" >禁用</el-button>-->
            <!--                      <el-button @click="handleEnable(1)" >启用</el-button>-->
<!--            <el-button @click="handleExport">导出</el-button>-->
            <!--                      <el-button>导入</el-button>-->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="list_data" @selection-change="handleSelectionChange" :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="单据编号" prop="oddNumber" width="120"></el-table-column>
            <el-table-column label="申请日期" prop="applyDate" width="120"></el-table-column>
            <el-table-column label="申请人" prop="applyUserName" width="120"></el-table-column>
            <el-table-column label="收款公司" prop="receiptCompanyName" width="120"></el-table-column>
            <el-table-column label="业务类型" prop="receiptBizType" width="120">
              <template slot-scope="scope" >
                <dict-tag  :options="dict.type.receipt_biz_type" :value="scope.row.receiptBizType"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="收款用途" prop="receiptPurpose" width="120">

              <template slot-scope="scope" >
                <dict-tag  :options="dict.type.receipt_purpose" :value="scope.row.receiptPurpose"></dict-tag>
              </template>
            </el-table-column>
<!--            <el-table-column label="结算账户" prop="cargoOwnerName" width="120"></el-table-column>-->
            <el-table-column label="收款金额" prop="totalReceiptAmt" width="120"></el-table-column>
<!--            <el-table-column label="币种" prop="cargoOwnerName" width="120"></el-table-column>-->
            <el-table-column label="货主" prop="cargoOwnerName" width="120"></el-table-column>
            <el-table-column label="付款单位" prop="paymentCompanyName" width="120"></el-table-column>
            <el-table-column label="是否开票" prop="invoiceOrNot" width="120">
              <template slot-scope="scope" >
                {{scope.row.invoiceOrNot == 1 ? '是' : '否'}}
                </template>
            </el-table-column>
            <el-table-column label="业务归属单位" prop="ownershipCompanyName" width="120"></el-table-column>
            <el-table-column label="状态" prop="handleStatus" width="120">
              <template slot-scope="scope" >
                {{scope.row.handleStatus == 1 ? '已收款' : '已撤销 '}}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="120"></el-table-column>
            <el-table-column label="备注" prop="remark" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-drawer title="新增收款单" size="80%" :visible.sync="dialog_show">
      <el-form  ref="form" :model="form_data" :rules="form_data_rules"  size="small" :inline="true">
        <div>
          <div class="section">
            <el-row>
<!--              <el-col :span="6" >-->
<!--                <el-form-item label="申请人" prop="applyUserId">-->
<!--                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}">-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="6" >-->
<!--                <el-form-item label="申请日期" prop="applyDate">-->
<!--                  <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="6" >
                <el-form-item label="收款日期" prop="applyDate">
                  <el-date-picker
                    v-model="form_data.applyDate"
                    type="date" value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="付款对象" prop="paymentRole">
                  <el-select filterable  placeholder="请选择" v-model="form_data.paymentRole" :style="{width: '100%'}" @change="onPaymentRoleChange">
                    <el-option label="货主" value="2"></el-option>
                    <el-option label="档口" value="3"></el-option>
                    <el-option label="客户" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="付款单位" prop="paymentCompanyId">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.paymentCompanyId">
                    <el-option v-if="form_data.paymentRole == 2" v-for="item in payment_roles" :label="item.name" :value="item.id"></el-option>
                    <el-option v-if="form_data.paymentRole == 3" v-for="item in payment_roles" :label="item.marketName+'-'+item.name" :value="item.id"></el-option>
                    <el-option v-if="form_data.paymentRole == 4" v-for="item in payment_roles" :label="item.customerName	" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="收款公司" prop="receiptCompanyId">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.receiptCompanyId">
                    <el-option v-for="item in receipt_company_list" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="业务类型" prop="receiptBizType">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.receiptBizType">
                    <el-option label="收到供应链业务货款" value="1"></el-option>
                    <el-option label="收到代卖业务货款" value="2"></el-option>
                    <el-option label="收到自营业务货款" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="收款用途" prop="receiptPurpose">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.receiptPurpose">
                    <el-option label="货款" value="1"></el-option>
                    <el-option label="运费" value="2"></el-option>
                    <el-option label="保证金" value="3"></el-option>
                    <el-option label="税金" value="4"></el-option>
                    <el-option label="仓储费" value="5"></el-option>
                    <el-option label="通关费" value="6"></el-option>
                    <el-option label="借款" value="7"></el-option>
                    <el-option label="其他" value="8"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="业务归属单位" prop="ownershipCompanyId">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.ownershipCompanyId">
                    <el-option v-for="item in ownership_company_list" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="货主" prop="cargoOwnerId">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.cargoOwnerId" @change="onOwnerChange">
                    <el-option v-for="item in owner_list" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="供货单" prop="supplyListId">
                  <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="form_data.supplyListId">
                    <el-option v-for="item in supply_list" :label="item.containerNumber" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="是否开票" prop="invoiceOrNot">
                  <el-radio-group v-model="form_data.invoiceOrNot">
                    <el-radio label="1" value="1" >是</el-radio>
                    <el-radio label="0" value="0" >否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <div style="padding-bottom: 12px;display: flex;" >
              <div>核销单据</div>
              <div style="flex:1;"></div>
              <div>
                <el-button @click="chooseOrder">选择单据</el-button>
              </div>
            </div>
            <div>
              <el-table :data="orders" style="width: 100%" show-summary :summary-method="getSummaries" >
                <el-table-column prop="date" label="序号">
                  <template slot-scope="scope" >
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="单据编号" prop="saleListNumber"></el-table-column>
                <el-table-column label="单据类型" prop="saleListNumber">
                  <template slot-scope="scope" >销售单</template>
                </el-table-column>
                <el-table-column label="合同号" prop="contractNumber"></el-table-column>
                <el-table-column label="柜号" prop="containerNumber"></el-table-column>
                <el-table-column label="货主" prop="cargoOwnerName"></el-table-column>
                <el-table-column label="业务日期" prop="saleDate"></el-table-column>
                <el-table-column label="单据金额" prop="payable"></el-table-column>
                <el-table-column label="已核销金额" prop="writtenOffAmt"></el-table-column>
                <el-table-column label="未核销金额" prop="unwrittenOffAmt"></el-table-column>
                <el-table-column prop="writeOffAmt" label="本次核销金额">
                  <template slot-scope="scope" >
                    <el-input v-model="orders[scope.$index].writeOffAmt" type="number"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="section">
            <div style="padding-bottom: 12px;">结算账户</div>
            <div>
              <el-table :data="fees" style="width: 100%" >
                <el-table-column prop="date" label="序号">
                  <template slot-scope="scope" >
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="结算账户">
                  <template slot-scope="scope" >
                    <el-select filterable   style="width: 100%;" v-model="fees[scope.$index].accountId" placeholder="请选择" >
                      <el-option v-for="dict in dict.type.settlement_way" :key="dict.value" :label="dict.label"
                                 :value="dict.value"  ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="币种">
                  <template slot-scope="scope" >
                    <el-select filterable   style="width: 100%;" v-model="fees[scope.$index].currencyId" placeholder="请选择" >
                      <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                                 :value="dict.value"  ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="收款金额">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].amt"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="备注">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].remark"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="操作">
                  <template slot-scope="scope" >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="scope.$index != 0"
                      @click="delFee(scope.row,scope.$index)"
                    >删除</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      @click="addFee(scope.row)"
                    >新增</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="section">
            <div>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form_data.remark" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
<!--            <div>-->
<!--              <el-form-item label="预收款核销" prop="remark1">-->
<!--                <el-input v-model="form_data.remark1" placeholder="请输入金额"></el-input>-->
<!--              </el-form-item>-->
<!--            </div>-->
          </div>
          <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
            <el-button type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </el-form>
    </el-drawer>
    <el-drawer
      title="收款单详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <div>
        <div class="section">
          <el-row>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">单据编号</div>
              <div>{{info.oddNumber}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">状态</div>
              <div>{{info.handleStatus == 1?'已收款':'已撤销'}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">申请人</div>
              <div>{{info.applyUserName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">申请日期</div>
              <div>{{info.applyDate}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">付款单位</div>
              <div>{{info.paymentCompanyName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">收款公司</div>
              <div>{{info.receiptCompanyName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">业务类型</div>
              <div>{{info.receiptBizType=='1'?'收到供应链业务货款':info.receiptBizType=='2'?'收到代卖业务货':'收到自营业务货款'}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">收款用途</div>
              <div>{{info.receiptPurpose=='1'?'货款':info.receiptBizType=='2'?'运费':info.receiptBizType=='3'?'保证金':info.receiptBizType=='4'?'税金':
                info.receiptBizType=='5'?'仓储费':info.receiptBizType=='6'?'通关费':info.receiptBizType=='7'?'借款':'其他'}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">业务归属单位</div>
              <div>{{ info.ownershipCompanyName }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">货主</div>
              <div>{{ info.cargoOwnerName }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">是否开票</div>
              <div>{{ (info.invoiceOrNot == '0'||info.invoiceOrNot == null)?'否':'是' }}</div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div style="padding-bottom: 12px;">核销单据</div>
          <div>
            <el-table :data="info.xnfReceiptReconciliationDocumentList" show-summary>
              <el-table-column label="序号">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="单据编号" prop="receiptNumber" >
              </el-table-column>
              <el-table-column label="单据类型">
                <template slot-scope="scope" >销售单</template>
              </el-table-column>
              <el-table-column label="合同号" prop="contractNumber" >
              </el-table-column>
              <el-table-column label="柜号" prop="containerNumber" >
              </el-table-column>
<!--              <el-table-column label="货主" prop="cargoOwnerName" >-->
<!--              </el-table-column>-->
              <el-table-column label="业务日期" prop="bizDate" >
              </el-table-column>
              <el-table-column label="单据金额" prop="paymentAmt" >
              </el-table-column>
              <el-table-column label="已核销金额" prop="writeOffAmt" >
              </el-table-column>
              <el-table-column label="未核销金额" prop="writtenOffAmt" >
              </el-table-column>
              <el-table-column label="本次核销金额" prop="paymentAmt" >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="section">
          <div style="padding-bottom: 12px;">结算账户</div>
          <div>
            <el-table :data="info.xnfReceiptSettleAccountsList" show-summary :summary-method="getSummarAmount" >
              <el-table-column label="序号">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="结算账户" prop="accountId">
                <template slot-scope="scope">
                  <dict-tag  :options="dict.type.settlement_way" :value="scope.row.accountId"></dict-tag>
                </template>
              </el-table-column>
              <el-table-column label="币种" prop="currencyId">
                <template slot-scope="scope">
                  <dict-tag  :options="dict.type.currency" :value="scope.row.currencyId"></dict-tag>
                </template>
              </el-table-column>
              <el-table-column label="收款金额" prop="amt"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="section">
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 168px;text-align: right;">备注</div>
            <div>{{info.remark}}</div>
          </div>
<!--          <div style="display: flex;margin-top: 10px;">-->
<!--            <div style="width: 168px;text-align: right;">预收款金额</div>-->
<!--            <div></div>-->
<!--          </div>-->
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 168px;text-align: right;">合计收款金额</div>
            <div style="margin-left: 10px;">{{info.totalReceiptAmt}}</div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog :visible.sync="order_dialog_show" center title="选择单据">
      <div>
        <div>
          <el-form  size="small" :inline="true">
            <el-form-item label="销售单号" prop="saleListNumber">
              <el-input v-model="sale_list_params.saleListNumber"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="querySaleList">查询</el-button>
              <el-button type="primary" @click="resetSaleList">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table :data="sale_list" ref="multipleTable"  @selection-change="orderSelectionChange" height="60vh" >
        <el-table-column type="selection" width="50" align="center"  />
        <el-table-column label="销售单号" prop="saleListNumber"></el-table-column>
        <el-table-column label="单据类型" prop="saleListNumber">
          <template slot-scope="scope" >销售单</template>
        </el-table-column>
        <el-table-column label="合同号" prop="contractNumber"></el-table-column>
        <el-table-column label="柜号" prop="containerNumber"></el-table-column>
        <el-table-column label="货主" prop="cargoOwnerName"></el-table-column>
        <el-table-column label="业务日期" prop="saleDate"></el-table-column>
        <el-table-column label="单据金额" prop="payable"></el-table-column>
        <el-table-column label="已核销金额" prop="writtenOffAmt"></el-table-column>
        <el-table-column label="未核销金额" prop="unwrittenOffAmt"></el-table-column>
      </el-table>
      <div slot="title" style="background: #F3F4F6;margin: -20px;padding: 20px;height: 58px;border-radius: 10px;">选择单据</div>
      <div slot="footer" style="display: flex;justify-content: flex-end;width: 100%;">
        <el-button @click="order_dialog_show = false" >取消</el-button>
        <el-button type="primary"  @click="confirmChoose">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {detail as supplyOrderDetail,list as supplyOrderList} from "@/api/supply/order";
import {list as feeList} from "@/api/fee/fee";
import {list,add,detail,del} from "@/api/finance/receive"
import {list as ownerList} from "@/api/base/owner"
import {list as stallList} from "@/api/base/stall"
import {list as customerList} from "@/api/base/customer"
import {list as receiptCompanyList} from "@/api/base/receipt_company"
import {list as ownershipCompanyList} from "@/api/base/ownership_company"
import {list as saleList} from "@/api/sell/sale_list"
import store from '@/store'

export default {
  name: 'receive',
  dicts:['settlement_way','currency','receipt_biz_type','receipt_purpose'],
  data(){
    return {
      table_height:window.innerHeight - 300,
      sale_list_params:{saleListNumber:''},
      order_dialog_show:false,
      dialog_show:false,
      edit_dialog_show:false,
      form_data:{},
      form_data_rules:{
        applyDate: [
          { required: true, message: '请选择收款日期', trigger: 'change' }
        ],
        paymentRole: [
          { required: true, message: '请选择付款对象', trigger: 'change' }
        ],
        paymentCompanyId: [
          { required: true, message: '请选择付款单位', trigger: 'change' }
        ],
        receiptCompanyId: [
          { required: true, message: '请选择收款公司', trigger: 'change' }
        ],
        receiptBizType: [
          { required: true, message: '请选择业务类型', trigger: 'change' }
        ],
        receiptPurpose: [
          { required: true, message: '请选择收款用途', trigger: 'change' }
        ],
        ownershipCompanyId: [
          { required: true, message: '请选择业务归属单位', trigger: 'change' }
        ]
      },
      fees:[{ remark:'' }],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        oddNumber:''
      },
      owner_list:[],
      supply_list:[],
      list_data:[],
      payment_roles:[],
      search_payment_roles:[],
      receipt_company_list:[],
      ownership_company_list:[],
      sale_list:[],
      sale_id_list:[],
      choose_order_list:[],
      orders:[],
      info:{}
    }
  },
  created() {
    this.getList()
    this.getReceiptCompanyList()
    this.getOwnershipCompanyList()
    this.getOwnerList()
  },
  methods:{
    querySaleList(){
      this.getSaleList()
    },
    resetSaleList(){
      this.sale_list_params = {
        ...this.sale_list_params,
        saleListNumber:''
      }
      this.getSaleList()
    },
    getSaleList(){
      this.sale_list = [];
      let sale_list_params = {
        ...this.sale_list_params,
        cargoOwnerId:this.form_data.cargoOwnerId,is_page:0
      }
      saleList(sale_list_params).then(res => {
        this.sale_list = res.rows

        this.$nextTick(() => {
          this.sale_list.forEach(row => {
            this.orders.forEach(order => {
              if (row.id == order.id) {
                this.$set(order,'writeOffAmt',row['writeOffAmt']);
                this.$refs.multipleTable.toggleRowSelection(row, true); // 第二个参数为 true 表示选中状态
              }
            })
            // this.$refs.multipleTable.toggleRowSelection(row, true); // 第二个参数为 true 表示选中状态
          });
        });
      })
    },
    getOwnerList(){
      ownerList({is_page:0}).then(res => {
        this.owner_list = res.rows
      })
    },
    getOwnershipCompanyList(){
      ownershipCompanyList({is_page:0}).then(res => {
        this.ownership_company_list = res.rows
      })
    },
    getReceiptCompanyList(){
      receiptCompanyList({is_page:0}).then(res => {
        this.receipt_company_list = res.rows
      })
    },
    getList(){
      list(this.list_params).then(res => {
        this.list_data = res.rows;
      })
    },
    handleQuery(){
      this.getList()
    },
    resetQuery(){
      this.list_params = {
        pageNum: 1,
        pageSize: 10,
        ownershipCompanyId: '',
        oddNumber:''
      }
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delFee(row,index){
      this.fees.splice(index,1)
    },
    addFee(row){
      this.fees.push({ remark:'' })
    },
    submitData(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let totalReceiptAmt = 0;
          let fees = this.fees.map(item => {
            totalReceiptAmt += item.amt
            return {
              ...item,
              receiptBelong:1,
              supplyListId:this.form_data.supplyListId
              }
          })
          let orders = this.orders.map(item => {
            return {
              ...item,
              receiptNumber: this.orders[0].saleListNumber,
              receiptType:1,
              paymentAmt:item.payable,
              supplyListId:this.form_data.supplyListId,
              bizDate:new Date()
            }
            })
          let params = {
            ...this.form_data,
            applyUserId:store.getters.user_id,
            // applyDate:new Date(),
            totalReceiptAmt:totalReceiptAmt,
            xnfReceiptSettleAccountsList:fees,
            xnfReceiptReconciliationDocumentList:orders
          }
          console.log(params)
          console.log(params)
          add(params).then(res => {
            this.$message.success('提交成功')
            this.dialog_show = false
            this.$refs.form_data.resetFields()
            this.getList()
          })
        }else{
          return false;
        }
      })
    },
    showInfo(row){
      console.log(row)
      this.info = {}
      this.supply_order_info = {}
      this.fees = []
      detail(row.id).then(res=>{
        this.info = res.data

        // supplyOrderDetail(res.data.supplyListId).then(res1 => {
        //   this.supply_order_info = {
        //     ...res1.data
        //   }
        // })
        // feeList({supplyListId:res.data.supplyListId,bizType:1}).then(res2 => {
        //   this.fees = res2.rows;
        // })
      })
      this.edit_dialog_show = true
    },

    delitem(row) {
      let id = row.id;
      del(id).then(res=>{
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getList()
      })
    },
    addInfo(){
      this.form_data = {}
      this.orders = []
      this.fees = [{ remark:'' }]
      this.dialog_show = true
    },
    onPaymentRoleChange(e){
      if (e == 2){
        ownerList({is_page:0}).then(res=>{
          this.payment_roles = res.rows
        })
      }else if (e == 3){
        stallList({is_page:0}).then(res=>{
          this.payment_roles = res.rows

           })
      }else{
        customerList({is_page:0}).then(res=>{
          this.payment_roles = res.rows
        })
      }
    },
    onSearchPaymentRoleChange(e){
      if (e == 2){
        ownerList({is_page:0}).then(res=>{
          this.search_payment_roles = res.rows
        })
      }else if (e == 3){
        stallList({is_page:0}).then(res=>{
          this.search_payment_roles = res.rows

           })
      }else{
        customerList({is_page:0}).then(res=>{
          this.search_payment_roles = res.rows
        })
      }
    },
    chooseOrder(){
      if (this.form_data.cargoOwnerId == '' || this.form_data.cargoOwnerId== undefined){
        console.log('请选择货主')
        this.$message.error('请选择货主')
        return
      }
      this.order_dialog_show = true
      this.getSaleList()
    },
    orderSelectionChange(selection){
      this.sale_id_list = selection.map(item => item.id);
      this.choose_order_list = selection.map(item => item);
      console.log(this.choose_order_list)
    },
    confirmChoose(){
      let orders = this.choose_order_list
      this.orders = orders;
      this.order_dialog_show = false
    },
    onOwnerChange(e){
      console.log(e)
      this.form_data = {
        ...this.form_data,
        supplyListId: ''
      }
      supplyOrderList({cargoOwnerId:e,is_page:0}).then(res => {
        this.supply_list = res.rows
      })
    },
    getSummarAmount(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }else if(index === 3){
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      })

      return sums;
    },
    getSummaries(param){

      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }else if(index === 7|| index === 8 || index === 9 || index === 10){
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      })

      return sums;
    }
  }
}
</script>


<style scoped>
.section{
  background: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}

</style>
